<template>
    <div class="loginWrapper">
        <div class="login-box">
            <el-container class="login-box-content">
                <el-header class="login-title">
                    任务管理系统登录
                </el-header>
                <el-main class="login-content">
                    <el-input v-model="username" placeholder="请输用户名"></el-input>
                    <el-input v-model="password" placeholder="请输入密码"></el-input>
                </el-main>
                <el-footer class="login-footer">
                    <el-button type="primary" round class="login-button" @click="dologin">登录</el-button>
                </el-footer>
            </el-container>
        </div>
    </div>
</template>
<script>
    export default ({
        data() {
            return {
                username: '',
                password: ''
            }
        },
        created() {
            if (parseInt(this.getCookie('sessionid')) || parseInt(this.getCookie('sessionid')) === 0) {
                let location = {
                    path: '/home'
                }
                this.$router.push(location);
            } else {
                let location = {
                    path: '/login'
                }
                this.$router.push(location);
            }
        },
        methods: {
            //获得cookie
            getCookie(cname) {
                let name = cname + '=';
                let cookieArr = document.cookie.split(';');
                let cookieObj = {};
                cookieArr.forEach((item, index) => {
                    let unitCookieArr = item.split('=');
                    cookieObj[unitCookieArr[0]] = unitCookieArr[1];
                })
                if (cookieObj[cname] !== undefined) {
                    return cookieObj[cname];
                } else {
                    return undefined
                }
            },
            //设置cookie
            setCookie(cname, cvalue, exdays=365) {
                let d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                let expires = 'expires=' + d.toUTCString();
                document.cookie = cname + '=' + cvalue + ';' + expires;
            },
            //登录
            dologin() {
                this.setCookie('sessionid', 2);
                let location = {
                    path: '/home'
                }
                this.$router.push(location);                
            }
        }
    })
</script>
<style lang="less">
    .loginWrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: Center;
        background-color: #F1F1F1;
    }

    .login-box {
        height: 300px;
        width: 350px;
        display: flex;
        justify-content: center;
        align-items: Center;
        box-shadow: #999 0 0 8px;
        background-color: #fff;
        margin-top: -150px;
    }

    .login-title {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        color: #409EFF;
        font-size: 18px;
        font-weight: 700;
        font-family: "Microsoft YaHei";
    }

    .login-footer {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 80px;
    }

    .login-content {
        display: flex;
        justify-content: space-around;
        align-items: Center;
        flex-direction: column;
        padding: 25px;
    }

    .login-button {
        padding: 10px 135px !important;
    }

    .login-box-content {
        height: 100%;
    }
</style>